<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont back-icon">&#xe628;</span>
        </div>
        <div class="header-input">
            <span class="iconfont search-icon">&#xe648;</span>
            <input type="text" class="serach-input" placeholder="请输入搜索内容"/>
        </div>
        <router-link tag="div" to="/city" class="header-right">
            {{city}}<span class="iconfont address-icon">&#xe64a;</span>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: 'HomeHeader',
        props:{
            city: String

            
        }
    }
</script>

<style lang="stylus" scoped>
   @import '~styles/varibles.styl'
   .header
      display:flex;
      height:.86rem;
      line-height:.86rem;
      text-align:left;
      background:$bgcolor;
      overflow:hidden;
      .header-left
         float:left;
         width:.64rem;
         color:#fff;
         .back-icon
           display:block;
           text-align:center;
           font-size:.6rem;
           margin-top:.05rem;
      .header-input
         flex:1; 
         height:.64rem;
         line-height:.64rem;
         margin-top:.11rem;
         padding-left:.1rem;
         border-radius:.08rem;
         background:#fff; 
         .search-icon{
             display:inline-block;
             font-size:.4rem;
         } 
         .serach-input{
             line-height:.54rem;
             vertical-align:top;
             margin-top:.05rem;
             font-size:0.32rem;
         }
      .header-right
         float:right;
         text-align:center;
         width:1.24rem; 
         color:#fff;
         .address-icon
            vertical-align:middle;
            margin-left:.04rem;
         
</style>